<style media="screen">
	.business-follow-list-item {
        border-bottom: 1px solid #e5e5e5;
    }

    .business-follow-list-item:last-child {
        border-bottom: none;
    }

    .head-container{
      position: relative;
      padding: 10px 0 14px;
      border-bottom: 1px solid #E3E3E5;
    }
    .head-container .mes{
      overflow: hidden;
      margin-right: 10px;
      float: left;
    }
    .head-container .mes p{
      font-size: 12px;
      color:#CFCFCF;
      margin-bottom: 6px;
    }
    .head-container .mes input{
      width: 260px;
      height: 34px;
    }
    .head-container .flow{
      float: left;
      margin-right: 10px;
    }
    .head-container .flow p{
      font-size: 12px;
      color:#CFCFCF;
      margin-bottom: 6px;
    }
    .head-container .flow .flow-select{
      width: 140px;
      height: 34px;
    }
    .head-container .button-group{
      padding-top: 23px;
    }
	.config-table-wrap:hover {
		overflow-x: scroll;
	}

	.extension-wrap:hover .table-type-wrap {
			display: block;
		}
		 .table-type-wrap {
	    width: 102px;
	    display: none;
	    position: absolute;
	    right: 20px;
	    top: -30px;
	    background-color: #fff;
	    border-radius: 4px;
	    box-shadow: 0 0 4px rgba(214,214,214,.75);
	}
	.table-type-wrap:before {
	    display: block;
	    content: '';
	    border-width: 8px 8px 8px 8px;
	    border-style: solid;
	    border-color: transparent transparent transparent #fff;
	    position: absolute;
	    left: 102px;
	    top: 40%;
	}
	.table-type-wrap li {
	    padding: 0 6px;
	    height: 24px;
	    line-height: 24px;
	    color: #5e67a5;
	    cursor: pointer;
			text-align: left;
	}
	.table-type-wrap li.active {
	    background-color: #f2f2f2;
	}

	.init-hover:hover .init-tips1, .init-hover:hover .init-tips2 {
	    display: block;
	}

	.init-tips1 {
	    display: none;
	    width: 240px;
	    position: absolute;
	    left: 50%;
	    top: 28px;
	    background: #fff;
	    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .2));
	    transform: translate(-50%, 0);
	    padding: 10px;
	    border-radius: 4px;
			word-wrap:break-word !important;
			white-space:normal;
			line-height: 18px;
			z-index: 999;
	}

	.init-tips1:before {
	    content: '';
	    position: absolute;
	    left: 50%;
	    transform: translate(-50%, 0);
	    top: -16px;
	    width: 0;
	    height: 0;
	    border-width: 8px;
	    border-style: solid;
	    border-color: transparent transparent #fff transparent;
	}
	.init-tips2 {
	    display: none;
	    width: 240px;
	    position: absolute;
	    right: 100%;
	    top: 50%;
	    background: #fff;
	    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .2));
			transform: translate(0, -50%);
	    padding: 0 10px;
	    border-radius: 4px;
			word-wrap:break-word !important;
			white-space:normal;
			line-height: 33px;
			z-index: 999;
	}

	.init-tips2:before {
	    content: '';
	    position: absolute;
	    right: -14px;
	    transform: translate(0, -50%);
	    top: 50%;
	    width: 0;
	    height: 0;
	    border-width: 8px;
	    border-style: solid;
	    border-color: transparent transparent transparent #fff;
	}

	.text-hover-top {
	      position: absolute;
	      width: 200px;
	      padding: 15px;
	      background-color: #fff;
	      z-index: 9;
	      color: #999;
	      filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
	      border-radius: 4px;
	      line-height: 24px;
				word-wrap:break-word
	  }

	  .text-hover-top::before {
	      content: '';
	      position: absolute;
	      left: 50%;
	      top: -10px;
	      width: 0;
	      height: 0;
	      border-width: 0 10px 10px;
	      border-style: solid;
	      border-color: transparent transparent #fff;
	      transform: translate(-50%, 0);
	  }
</style>

<section class="pl-24 pr-24" id="businessMange" @click="hideRpersonList">
	<hl-page-header title="线索跟进管理"></hl-page-header>

	<div class="head-container clearfix">
		<div class="clearfix">
			<div class="mes">
				<p>信息搜索</p>
				<div class="global_search">
					<span class="icon-Gm-search"></span>
					<input autocomplete="off" type="text" class="global_ipt_text" placeholder="主题/目标客户/联系人/联系电话/创建人" v-model="keyWord" />
				</div>
			</div>
			<div class="flow">
				<p>跟进人</p>
				<div class="pull-left line-height-34 relative">
					<input type="text" placeholder="全部" class="global_ipt_text" autocomplete="off" style="width:120px;" v-model="rpersonKeyword" />
					<ul class="append-temp absolute bg-fff border z-998 line-height-34" style="left:0; top:35px; max-height:200px; overflow-y:scroll; width: 100%; text-indent:0.8em;"
					 v-if="rperson.list.length > 0">
						<li v-for="item in rperson.list" :key="item.id" class="clearfix" @click.stop="setRperson(item.name, item.id)">
							<span class="pull-left">{{item.name}}</span>
							<span class="pull-right">{{item.phone}}</span>
						</li>
					</ul>
				</div>
			</div>
			<div class="flow" v-show="!isExtenseFlag">
				<p>跟进时间</p>
				<div class="pull-right dy-flex" style="align-items: center">
					<web-calendar  v-model="firstRowBeginDate" :afterdate="firstRowEndDate" tips="起始日期" width="130"></web-calendar>
					<span style="width:20px;" class="text-center line-height-34 inline">-</span>
					<web-calendar  v-model="firstRowEndDate" :beforedate="firstRowBeginDate" tips="截止日期" width="130"></web-calendar>
				</div>
			</div>
			<div class="flow" v-show="isExtenseFlag">
				<p>渠道分类</p>
				<hl-select :data="channelType" v-model="selectedChannelType" width="120" @on-change="selectChannelType"></hl-select>

			</div>
			<div class="flow" v-show="isExtenseFlag">
				<p>渠道名称</p>
				<hl-select :data="channelName" v-model="selectedChannelName" width="120" @on-change="selectChannelName"></hl-select>

			</div>
			<div class="flow" v-show="isExtenseFlag">
				<p>线索来源</p>
				<hl-select :data="sourceList" v-model="selectedSource" width="120" @on-change="selectSJsource"></hl-select>

			</div>

			<div class="button-group" v-show="!isExtenseFlag">
				<hl-button @on-click="search" size="mini">查询</hl-button>
				<hl-button @on-click="reset" size="mini">重置</hl-button>
			</div>
		</div>

		<div class="mt-10" v-show="isExtenseFlag">
			<div class="flow">
			  <p>所属行业</p>
			  <hl-select :data="industryType" v-model="selectedIndustryType" width="120" ></hl-select>
			</div>
			<div class="flow">
				<p>跟进时间</p>
				<div class="pull-right dy-flex" style="align-items: center"> 
					<web-calendar  v-model="secondRowBeginDate" :afterdate="secondRowEndDate" tips="起始日期" width="130"></web-calendar>
					<span style="width:20px;" class="text-center line-height-34 inline">-</span>
					<web-calendar  v-model="secondRowEndDate" :beforedate="secondRowBeginDate" tips="截止日期" width="130"></web-calendar>
				</div>
			</div>
			<div class="button-group">
				<hl-button @on-click="search" size="mini">查询</hl-button>
				<hl-button @on-click="reset" size="mini">重置</hl-button>
			</div>
		</div>

		<div class="global_open_sign" @click="openSearch">
			<span v-if="!isExtenseFlag">更多筛选项</span>
			<span v-if="isExtenseFlag">收起筛选项</span>
		</div>
	</div>

	<div class="global_screening_container">
		 <hl-checkbox-button :data="listMenu" v-model="selectedListMenuCode" @on-click="selectMenuList" merge></hl-checkbox-button>
		<span class="global_refresh_icon icon-uniE94B" @click="resetTabbar" style="left:485px"></span>
	</div>

	<!-- //开始 -->
	<section class="config-table-container global_table absolute" style="margin:0 0 10px 0;border:1px solid #E5E5E5;">
		<div class="extension-wrap absolute z-50 cursor text-center" style="right: 0; top: 10px;width: 20px;background-color: #f0f2ff;">
			<i class="icon-predict-more extension-icon color-999"></i>
			<ul class="table-type-wrap">
				<li @click="selectTableType('JD')" :class="{'active': configType == 'JD' }">简单表格</li>
				<li @click="selectTableType('WZ')" :class="{'active': configType == 'WZ' }">完整表格</li>
				<li @click="selectTableType('PZ')" :class="{'active': configType == 'PZ' }">自定义表格<span class="icon icon-Gm-edit"
					 @click="showTableLayer"></span></li>
			</ul>
		</div>
		<!-- 内容表格 -->
		<div class="config-table-wrap clearfix" :class="{'config-table-scroll':isScroll}" ref="scrollLeft" style="margin-right: 0px;">
			<div :style="tbTitleWidth">
				<div class="config-table-title-wrap dy-flex">
					<div :style="{width: isNaN(leftWidth) ? '50%' : leftWidth + 'px'}" class="dy-flex">
						<!-- //完整 -->
						<div style="padding:0px;" class="config-table-title-item global_table_title" v-if="configType == 'WZ'" @click=" sortBySTTime(item)"
						 :style="{'width': item.styleWidth + 'px', 'text-align': item.value == 'memo' ? 'left' : 'center'}"
						 v-for="(item,index) in leftTableArr">
							<span>{{ item.name }}</span>
							<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate"
							 :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
								<span class="path1"></span><i class="path2"></i>
							</span>
						</div>
						<!-- //简单 -->
						<div style="padding:0px;" class="config-table-title-item global_table_title" v-if="configType == 'JD' && item.baseFlag == 'Y'"
						 @click=" sortBySTTime(item)" :style="{'width': item.styleWidth + 'px', 'text-align': item.value == 'memo' ? 'left' : 'center'}"
						 v-for="(item,index) in leftTableArr">
							<span>{{ item.name }}</span>
							<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate"
							 :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
								<span class="path1"></span><i class="path2"></i>
							</span>
						</div>
						<!-- //配置 -->
						<div style="padding:0px;" :class="'dy-fx-'+item.flex" class="config-table-title-item global_table_title" v-if="configType == 'PZ' && item.customShowFlag == 'Y'"
						 @click=" sortBySTTime(item)" :style="{'text-align': item.value == 'memo' ? 'left' : 'center'}"
						 v-for="(item,index) in leftTableArr">
							<span>{{ item.customDisplayName ? item.customDisplayName : item.name }}</span>
							<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate"
							 :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
								<span class="path1"></span><i class="path2"></i>
							</span>
						</div>
					</div>
					<div :style="{width: isNaN(rightWidth) ? '50%' : rightWidth + 'px'}" class="dy-flex">
						<!-- //完整 -->
						<div style="padding:0px;" :class="'dy-fx-'+item.flex" class="config-table-title-item global_table_title" v-if="configType == 'WZ'" @click=" sortBySTTime(item)"
						 :style="{'width': item.styleWidth + 'px', 'text-align': item.value == 'memo' ? 'left' : 'center'}"
						 v-for="(item,index) in rightTableArr">
							<span>{{ item.name }}</span>
							<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate"
							 :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
								<span class="path1"></span><i class="path2"></i>
							</span>
						</div>
						<!-- //简单 -->
						<div style="padding:0px;" :class="'dy-fx-'+item.flex" class="config-table-title-item global_table_title" v-if="configType == 'JD' && item.baseFlag == 'Y'"
						 @click=" sortBySTTime(item)" :style="{'width': item.styleWidth + 'px', 'text-align': item.value == 'memo' ? 'left' : 'center'}"
						 v-for="(item,index) in rightTableArr">
							<span>{{ item.name }}</span>
							<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate"
							 :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
								<span class="path1"></span><i class="path2"></i>
							</span>
						</div>
						<!-- //配置 -->
						<div style="padding:0px;" :class="'dy-fx-'+item.flex" class="config-table-title-item global_table_title" v-if="configType == 'PZ' && item.customShowFlag == 'Y'"
						 @click=" sortBySTTime(item)" :style="{'text-align': item.value == 'memo' ? 'left' : 'center'}"
						 v-for="(item,index) in rightTableArr">
							<span>{{ item.customDisplayName ? item.customDisplayName : item.name }}</span>
							<span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1" v-for="(time,indexTime) in dateTimeUpdate"
							 :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
								<span class="path1"></span><i class="path2"></i>
							</span>
						</div>
					</div>
				</div>

				<div class="config-table-content-wrap" style="overflow: initial;">

					<ul v-for="(item,index) in listData" class="global_table_item clearfix" style="overflow: initial;height: auto;">
						<li style="overflow: initial;" :style="{height: item.followupRecords.length ? (item.followupRecords.length*40)+'px' : '40px', width: isNaN(leftWidth) ? '50%' : leftWidth + 'px'}">
							<div class="dy-flex" :class="{'border-t': index0 > 0}" v-for="(item0, index0) in item.followupRecords">

								<!-- //完整 -->
								<div class="pull-left relative" :style="{'width':item1.styleWidth + 'px'}" v-if="configType == 'WZ'" v-for="(item1,index1) in leftTableArr">
									<span class="ellipsis-1" v-if="item1.value != 'memo'">{{item0[item1.value] | formatUndefinedFB}}</span>
									<span v-if="item1.value == 'memo'" style="display: block;text-align: left;float: left;">{{ item0.memo ? item0.memo.length > 12 ? item0.memo.substr(0,12) + '...' : item0.memo : '--' }}</span>
									<div class="init-hover absolute" @mouseenter="hoverText($event, item0.memo)" @mouseleave="mouseleaveOut" style="right: 0;top: 0;" v-if="item1.value == 'memo'" v-show="item0.memo && item0.memo.length > 12">
										<a href="javascript:;">详情</a>
									</div>
								</div>
								<!-- //简单 -->
								<div class="pull-left relative clearfix" :style="{'width':item1.styleWidth + 'px'}" v-if="configType == 'JD' && item1.baseFlag == 'Y'"
								 v-for="(item1,index1) in leftTableArr">
									<span class="ellipsis-1" v-if="item1.value != 'memo'">{{item0[item1.value] | formatUndefinedFB}}</span>
									<span v-if="item1.value == 'memo'" style="display: block;text-align: left;float: left;">{{ item0.memo ? item0.memo.length > 12 ? item0.memo.substr(0,12) + '...' : item0.memo : '--' }}</span>
									<div class="init-hover absolute" @mouseenter="hoverText($event, item0.memo)" @mouseleave="mouseleaveOut" style="right: 0;top: 0;" v-if="item1.value == 'memo'" v-show="item0.memo && item0.memo.length > 12">
										<a href="javascript:;">详情</a>
									</div>
								</div>
								<!-- //自定义 -->
								<div class="pull-left relative clearfix" :class="'dy-fx-'+item1.flex" v-if="configType == 'PZ' && item1.customShowFlag == 'Y'"
								 v-for="(item1,index1) in leftTableArr">
									<span class="ellipsis-1" v-if="item1.value != 'memo'">{{item0[item1.value] | formatUndefinedFB}}</span>
									<span v-if="item1.value == 'memo'" style="display: block;text-align: left;float: left;">{{ item0.memo ? item0.memo.length > 12 ? item0.memo.substr(0,12) + '...' : item0.memo : '--' }}</span>
									<div class="init-hover absolute" @mouseenter="hoverText($event, item0.memo)" @mouseleave="mouseleaveOut" style="right: 0;top: 0;" v-if="item1.value == 'memo'" v-show="item0.memo && item0.memo.length > 12">
										<a href="javascript:;">详情</a>
									</div>
								</div>
							</div>
						</li>
						<li class="border-l" style="overflow: initial;display: flex;align-items: center;" :style="{width: isNaN(rightWidth) ? '50%' : rightWidth + 'px', height: item.followupRecords.length ? (item.followupRecords.length*40)+'px' : '40px'}">
							<div class="dy-flex" style="width: 100%;">
								<!-- //完整 -->
								<div class="pull-left ellipsis-1" :class="'dy-fx-'+item1.flex" v-if="configType == 'WZ'" v-for="(item1,index1) in rightTableArr">
									<span>{{item[item1.value] | formatUndefinedFB}}</span>
								</div>
								<!-- //简单 -->
								<div class="pull-left ellipsis-1 clearfix" :class="'dy-fx-'+item1.flex" v-if="configType == 'JD' && item1.baseFlag == 'Y'"
								 v-for="(item1,index1) in rightTableArr">
									<span>{{item[item1.value] | formatUndefinedFB}}</span>
								</div>
								<!-- //自定义 -->
								<div class="pull-left ellipsis-1 clearfix" :class="'dy-fx-'+item1.flex" v-if="configType == 'PZ' && item1.customShowFlag == 'Y'"
								 v-for="(item1,index1) in rightTableArr">
									<span>{{item[item1.value] | formatUndefinedFB}}</span>
								</div>
							</div>
				</div>
				</li>
				</ul>
			</div>
		</div>
		</div>
<div class="text-hover-top" v-if="texthover" :style="{left:lefthover, top:tophover}">{{textLong}}</div>
	</section>

	<!-- 自定义列表项弹出层 -->
	<div class="pop box-o-shadow config-table-layer" v-show="isShowTableLayer">
		<div class="head-pop font-16"><span>自定义列</span>
			<button class="fw-close absolute close" type="button" @click="closeTableLayer">×</button>
		</div>
		<div class="content-pop">
			<div class="content text-center">
				<ul class="title-wrap">
					<li class="dy-fx-1 text-left">名称</li>
					<li class="dy-fx-2">自定义名称</li>
					<li class="dy-fx-1">状态</li>
				</ul>
				<div class="ctx-wrap" id="sortableTable">
					<ul :class="{ 'active': item.isActive == 'Y' }" v-for="(item,index) in sortTableTitle" @mouseenter="showhighLightTitleItem(item,index)"
					 @mouseleave="removehighLightTitleItem(item,index)">
						<li class="sort-sign" :class="{ 'active':item.isActive == 'Y' }">排序</li>
						<li class="dy-fx-1 name">{{item.name}}</li>
						<li class="dy-fx-2">
							<input type="text" class="form-control" v-model="item.customDisplayName">
						</li>
						<li class="dy-fx-1 ">
							<span class="show-icon " :class="{'icon-Nav-contract-choice':item.customShowFlag == 'Y' , 'icon-uncheck':item.customShowFlag == 'N' }"
							 @click="selectedTitleItem(index)">显示</span>
							<span class="hide-icon " :class="{'icon-Nav-contract-choice':item.customShowFlag == 'N' , 'icon-uncheck':item.customShowFlag == 'Y' }"
							 @click="cancelSelectedTitleItem(index)">隐藏</span>
						</li>
					</ul>

				</div>
			</div>
		</div>
		<div class="fw-button">
			<button type="button" class="fw-submit yes" @click="confirmSubmitTable">确定</button>
			<button type="button" class="fw-submit no" @click="closeTableLayer">取消</button>
		</div>
	</div>

	<!--遮罩-->
	<div class="backdrop" v-if="isShowTableLayer"></div>
	<!-- end -->

	<div class="user-page ptb-10 border-b clearfix">
		<div class="pull-left user-page-num">
			<span class="font-14">共<i>{{totalCount}}</i>条记录</span>
			<span>每页<hl-select :data="pageCounts" v-model="limit" width="80" @on-change="selectPerNum"></hl-select>条</span>
		</div>
		<div class="pull-right">
			<hl-pagination v-model="currentPage" :total="totalPage" @change="searchData"></hl-pagination>
		</div>
	</div>

	<div class="ptb-10">
		<hl-button type="outline" @on-click="exportExcel">导出</hl-button>
	</div>

</section>
<script src="modules/system_config/scripts/right_company.js" charset="utf-8"></script>
<script src="modules/rent/scripts/business_follow_list.js" charset="utf-8"></script>
